<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="/bootstrap-switch-master/dist/js/bootstrap-switch.js"></script>
    <link href="/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
    <script src="/H-ui.admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/H-ui.admin/lib/ueditor/1.4.3/ueditor.all.js"></script>
</head>
<body>
<div style="margin: 50px 100px auto 100px">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active col-sm-4"><a href="#basic" aria-controls="home" role="tab" data-toggle="tab" style="text-align: center">编辑基本信息</a></li>
        <li role="presentation" class="col-sm-4"><a href="#stock" aria-controls="stock" role="tab" data-toggle="tab" style="text-align: center">规格/库存</a></li>
        <li role="presentation" class="col-sm-4"><a href="#detail" aria-controls="detail" role="tab" data-toggle="tab" style="text-align: center">编辑商品详情</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="basic">
            <form class="form-horizontal" action="" method="post">
                <input style="display: none" name="id" value="">
                <input style="display: none" name="uniacid" value="1">
                <div style="margin-left:25px; "><h4>基本信息</h4></div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品名称</label>
                    <div class="col-sm-8">
                        <div class="col-sm-8">
                            <input type="text" class="form-control">
                        </div>
                        <div class="col-sm-3">
                            <input type="text" class="form-control col-sm-3"placeholder="单位，如：个/件/包">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">关键字</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control">
                        <span class="help-block">商品关键字,能准确搜到商品的,比如 : 海尔电视|电视 之类的</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品类型</label>
                    <div class="col-sm-8">
                        <div class="radio-inline">
                            <input type="radio" name="type">&emsp;实体商品
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="type">&emsp;虚拟商品
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="type">&emsp;虚拟物品(卡密)
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="type">&emsp;批发商品
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="type">&emsp;记次/时商品
                        </div>
                        <span class="help-block">商品类型，商品保存后无法修改，请谨慎选择</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品分类</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            <option selected>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品图片</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-primary">选择图片</button>
                            </span>
                        </div>
                        <span class="help-block">第一张为缩略图，建议为正方型图片，其他为详情页面图片，尺寸建议宽度为640，并保持图片大小一致
                            您可以拖动图片改变其显示顺序</span>
                        <div class="checkbox-inline">
                            <input type="checkbox">详情显示首图
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">首图视频</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-primary">选择视频</button>
                            </span>
                        </div>
                        <span class="help-block">设置后商品详情首图默认显示视频，目前仅支持小程序</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品属性</label>
                    <div class="col-sm-8">
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;推荐
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;新品
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;热卖
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;包邮
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;不参与会员折扣
                        </div>
                    </div>
                </div>
                <div style="margin-left:25px; "><h4>商品信息</h4></div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品价格</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <span class="input-group-addon">售价</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">元&emsp;原价</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">元&emsp;成本</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">元</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2"></label>
                    <div class="col-sm-8">
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;支持货到付款
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;支持收银台
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;支持发票
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">运费设置</label>
                    <div class="col-sm-8">
                        <div class="radio-inline col-sm-4">
                            <input type="radio" name="set">&emsp;支持货到付款
                        </div>
                        <div class="col-sm-8">
                            <select class="form-control">
                                <option selected>默认模板</option>
                                <option>宜宾市配送模板</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2"></label>
                    <div class="col-sm-8">
                        <div class="radio-inline col-sm-4">
                            <input type="radio" name="set">&emsp;统一邮费
                        </div>
                        <div class="input-group col-sm-8">
                            <input type="text" class="form-control">
                            <span class="input-group-addon">元</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">上架</label>
                    <div class="col-sm-8">
                        <div class="radio-inline">
                            <input type="radio" name="shangjia">&emsp;是
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="shangjia">&emsp;否
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="shangjia">&emsp;赠品上架
                        </div>
                        <span class="help-block">赠品上架之后，状态不可更改。</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">是否选择上架时间</label>
                    <div class="col-sm-8">
                        <div class="radio-inline">
                            <input type="radio" name="shangjia">&emsp;是
                        </div>
                        <div class="radio-inline">
                            <input type="radio" name="shangjia">&emsp;否
                        </div>
                        <span class="help-block">商品在选择时间内自动上架，过期自动下架</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4"></label>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-primary next">下一步</button>
                    </div>
                </div>
            </form>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="stock">
            <form class="form-horizontal">
                <input style="display: none" name="id" value="">
                <input style="display: none" name="uniacid" value="1">
                <div style="margin-left:25px; "><h4>库存/规格</h4></div>
                <div class="form-group">
                    <label class="control-label col-sm-2">编码</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <span class="input-group-addon">编码</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">条码</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">重量</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">克</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">库存</label>
                    <div class="col-sm-8">
                        <div class="col-sm-3">
                            <input type="text" class="form-control">
                        </div>
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;显示库存
                        </div>
                        <div class="radio-inline">
                            <input type="radio">&emsp;拍下减库存
                        </div>
                        <div class="radio-inline">
                            <input type="radio">&emsp;付款减库存
                        </div>
                        <div class="radio-inline">
                            <input type="radio">&emsp;永不减库存
                        </div>
                        <span class="help-block">商品的剩余数量, 如启用多规格或为虚拟卡密产品，则此处设置无效.</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2"></label>
                    <div class="col-sm-8">
                        <div class="checkbox-inline">
                            <input type="checkbox">&emsp;启用商品规格
                        </div>
                        <span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则会到”已售罄“中，手机也不会显示, -1为不限制</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3"></label>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-default prev">上一步</button>
                        <button type="button" class="btn btn-primary next" style="margin-left: 25px">下一步</button>
                    </div>
                </div>
            </form>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="detail">
            <form class="form-horizontal">
                <input style="display: none" name="id" value="">
                <input style="display: none" name="uniacid" value="1">
                <div style="margin-left:25px; "><h4>内容</h4></div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品副标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品短标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2">商品详情</label>
                    <div class="col-sm-8">
                        <div id="eidtor" style="width: 100%;height: 300px"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3"></label>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-default prev">上一步</button>
                        <button type="button" class="btn btn-primary save" style="margin-left: 25px">保存商品</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $("input:not('.make-switch')").iCheck({
        labelHover : false,
        cursor : true,
        checkboxClass : 'icheckbox_square-blue',
        radioClass : 'iradio_square-blue',
        increaseArea : '20%'
    });
    var ue=UE.getEditor("eidtor");

    $(".next").on("click",function (e) {
        var current=-1;
        $("ul>li").each(function (index,item) {
            if($(item).hasClass("active")){
                current=index;
                return false;
            }
        });
        if(current==0){
            $(".nav-tabs li:eq(1) a").tab("show");
        }else{
            $(".nav-tabs li:eq(2) a").tab("show");
        }
    });

    $(".prev").on("click",function (e) {
        var current=-1;
        $("ul>li").each(function (index,item) {
            if($(item).hasClass("active")){
                current=index;
                return false;
            }
        });
        if(current==1){
            $(".nav-tabs li:eq(0) a").tab("show");
        }else{
            $(".nav-tabs li:eq(1) a").tab("show");
        }
    });
</script>
</body>
</html>